<template>
    <div class="container" v-cloak>
        <div class="blurBg" :style="{background:'url('+blurBg+') 0 0 no-repeat'}"></div>
        <div class="dataInfo">
            <div class="headerTitle" flex="main:justify cross:center">
                <div flex="cross:center">
                    <img :src="introduceVo.appImg" class="appPhoto"/>
                    <div>
                        <div style="margin-bottom:0.08rem" v-text="introduceVo.name"></div>
                        <div class="font12" v-text="introduceVo.apptype"></div>
                    </div>
                </div>
                <div class="beginUse" flex="main:center cross:center" @click="closeWebView()">开始使用</div>
            </div>
            <div class="tab font12" flex="main:justify cross:center">
                <div flex-box="1" flex="main:center cross:center" class="opacity5" :class="{focusTab:focusIndex==1}"
                     @click="changeFocus(1)">应用介绍
                </div>
                <div flex-box="1" flex="main:center cross:center" class="opacity5" :class="{focusTab:focusIndex==2}"
                     @click="changeFocus(2)">应用案例
                </div>
            </div>
            <div class="line"></div>
            <div v-if="focusIndex===1">
                <ul class="picesList">
                    <li v-for="(list,index) in appInfoList" @click.stop="clientSwiper(appInfoList,index)">
                        <img :src="list.imgUrl" class="videoImg" v-if="list.type==1"/>
                        <img :src="list.imgUrl+'?vframe/jpeg/offset/1/w/750/'" class="videoImg" v-if="list.type==3"/>
                        <img src="../../module/images/play.png" class="play" v-if="list.type==3">
                    </li>
                </ul>
                <div v-text="introduceVo.title" class="title font12"></div>
                <div class="titleInfo font12 opacity8" v-text="introduceVo.titleinfo"></div>
                <div class="greenInfo" v-if="introduceVo.content&&introduceVo.content[0]"><span class="green">老师-</span><span
                        v-text="introduceVo.content[0]"></span></div>
                <div class="greenInfo" v-if="introduceVo.content&&introduceVo.content[1]"><span class="green">学生-</span><span
                        v-text="introduceVo.content[1]"></span></div>
                <div class="greenInfo" v-if="introduceVo.content&&introduceVo.content[2]"><span class="green">孩子-</span><span
                        v-text="introduceVo.content[2]"></span></div>
                <div class="userInfo">
                    <div class="font12">功能特色：</div>
                    <ul>
                        <li class="userItem" v-for="(list,index) in introduceVo.features" v-text="(index+1)+'.'+introduceVo.features[index]"></li>
                    </ul>
                </div>
            </div>
            <div v-if="focusIndex===2">
                <div class="swiper-container" v-if="imgList&&imgList.length>1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(slide,index) in imgList"
                             @click.stop="clientSwiper(imgList,index)">
                            <img v-lazy="slide.imgUrl" v-if="slide.type==1" class="picesItem"/>
                            <img v-lazy="slide.imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="slide.type==3"
                                 class="picesItem"/>
                            <img src="../../module/images/play.png" class="play" v-if="slide.type==3"/>
                        </div>
                    </div>
                </div>
                <div class="oneImgBg" v-if="imgList&&imgList.length==1" @click.stop="clientSwiper(imgList,0)">
                    <img v-lazy="imgList[0].imgUrl" v-if="imgList[0].type==1"/>
                    <img v-lazy="imgList[0].imgUrl+'?vframe/jpeg/offset/1/w/750/'" v-if="imgList[0].type==3"
                         class="picesItem"/>
                    <img src="../../module/images/play.png" class="play" v-if="imgList[0].type==3"/>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
    import API from '../../api/api.js'
    import '../../vendor/js/swiper.min.js'
    import {imagedomain, domain} from '../../api/api.js'
    const api = new API();
    export default{
        data(){
            return {
                focusIndex: 1,
                introduceVo: '',
                imgList: [],
                appInfoList: [],
                appCode: this.$route.query.appCode ? this.$route.query.appCode : '',
                version: this.$route.query.version ? this.$route.query.version : '',
            }
        },
        mounted(){
            this.$util.jsBridgeCallBack('jsLeftAction', this.closeWebView);
            this.$nextTick(function () {
                this.getIntroduce();
            })
        },
        methods: {
            propsTitle(){
                this.$util.JsBridge('propsTitle', {
                    title: this.introduceVo.name,
                }, (res) => {
                })
            },
            getIntroduce(){
                let params = {
                    appCode: this.appCode,
                    version:this.version
                }
                api.getIntroduce(params).then((res) => {
                    let {code, rs} = res;
                    if (code == 200) {
                        this.introduceVo = rs.introduceVo;
                        this.introduceVo.content = JSON.parse(this.introduceVo.content);
                        this.introduceVo.features = JSON.parse(this.introduceVo.features);
                        console.log(this.introduceVo.features)
                        this.list = rs.list;
                        this.appInfoList = JSON.parse(this.list[1].videoUrl);
                        this.imgList = JSON.parse(this.list[0].videoUrl)
                        setTimeout(() => {
                            this.propsTitle();
                        }, 300)
                    }
                })
            },
            closeWebView(){
                this.$util.JsBridge('closeWebView', {}, () => {
                })
            },
            swiperInit(){
                this.$nextTick(function () {
                    new Swiper('.swiper-container', {
                        slidesPerView: 1.2,
                        spaceBetween: 12,
                        observer: true,
                        observeParents: true,
                    })
                })
            },
            changeFocus(type){
                this.focusIndex = type;
                if (this.focusIndex == 2) {
                    this.swiperInit();
                }
            },
            clientSwiper(pices, index){
                let arr = Array.prototype.toString.call(pices) === '[object String]' ? JSON.parse(JSON.stringify(JSON.parse(pices))) : JSON.parse(JSON.stringify(pices))
                arr.forEach(function (e) {
                    e.imgUrl = e.imgUrl;
                    if (e.type == 3) {
                        e.coverUrl = e.imgUrl + '?vframe/jpeg/offset/1';
                    }
                });
                this.$util.JsBridge('picesSwiper', {
                    picesList: arr,
                    picesIndex: index
                }, (res) => {
                })
            },
        }
    }
</script>
<style scoped lang="scss">
    .swiper-container {
        margin: 0.12rem 0;
    }

    .swiper-slide {
        height: 4.27rem;
        overflow: hidden;
        background: #d8d8d8;
        .picesItem {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .oneImgBg {
        padding: 0 0.12rem;
        width: 100%;
        position: relative;
        height: 4.27rem;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .container {
        height: 100%;
        width:100%;
    }

    .appPhoto {
        width: 0.76rem;
        height: 0.76rem;
        border-radius: 0.06rem;
        margin-right: 0.12rem;
    }

    .picesList {
        padding: 0.12rem 0.12rem 0 0.12rem;
        li {
            position: relative;
            background: #d8d8d8;
            width: 3.51rem;
            height: 2.35rem;
            margin-bottom: 0.12rem;
        }
    }

    .beginUse {
        opacity: 0;
        background: rgba(255, 255, 255, 0.16);
        border-radius: 0.06rem;
        width: 0.78rem;
        height: 0.3rem;
        font-size: 0.12rem;
    }
    .headerTitle{
        padding:0.2rem 0.12rem 0.12rem 0.12rem;
    }
    .title {
        padding: 0 0.12rem;
    }

    .titleInfo {
        padding: 0.1rem 0.12rem;
    }

    .greenInfo {
        padding:0 0.12rem;
        margin-bottom:0.1rem;
        font-size: 0.12rem;
        opacity: 0.8;
    }
    .userInfo{
        padding:0 0.12rem 0.24rem 0.12rem;
    }
    .userItem{
        margin:0.02rem 0 ;
        font-size: 0.12rem;
        opacity: 0.8;
        letter-spacing:0.005rem;
        line-height:0.18rem;
    }
    .green {
        color: #1dc6b4;
    }

    .tab {;
        border: 1px solid #ffffff;
        border-radius: 0.06rem;
        width: 3.5rem;
        height: 0.32rem;
        margin: 0 0.12rem 0.12rem 0.12rem;
    }

    .focusTab {
        background: rgba(255, 255, 255, 0.16);
        height: 100%;
        opacity: 1;
    }

    .line {
        height: 1px;
        width: 100%;
        background: rgba(255, 255, 255, 0.2);
    }

    .videoImg {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        -c-object-fit: cover;
    }

    .videoWrap {
        width: 3.5rem;
        height: 2.35rem;
        margin: 0.12rem;
        background: #d8d8d8;
        position: relative;
    }

    .content {
        padding: 0 0.12rem;
        font-size: 0.12rem;
        letter-spacing: 0.005rem;
        line-height: 0.18rem;
    }
</style>
